import React, { useEffect } from "react";

import ReactDrag from "@/react-drag/src";

function Page(): JSX.Element {
  useEffect(() => {
    // document.querySelector(".xx")?.addEventListener("touchmove", (e: TouchEvent) => {
    //   console.log("e", e.touches[0].clientX, e.touches[0].clientY);
    //   console.log();
    // });
  }, []);

  return (
    <div className="xx">
      <p>11</p>
      <p>22</p>
      <p>33</p>
      <p>44</p>
      <p>55</p>
      <p>66</p>
      <p>77</p>
      <p>88</p>
      <p>99</p>
      <p>00</p>
      <p>11</p>
      <p>22</p>
      <p>33</p>
      <p>44</p>
      <p>55</p>
      <p>66</p>
      <p>77</p>
      <p>88</p>
      <p>99</p>
      <p>00</p>
      <p>11</p>
      <p>22</p>
      <p>33</p>
      <p>44</p>
      <p>55</p>
      <p>66</p>
      <div style={{ border: "1px solid #ccc" }}>
        <ReactDrag
          onDragEnd={(translate) => {
            console.log("translate", translate);
          }}
        >
          {(provided) => {
            console.log("provided", JSON.stringify(provided));
            return (
              <p
                ref={provided.innerRef}
                style={{
                  width: 100,
                  height: 100,
                  border: "1px solid",
                  margin: 10,
                  ...provided.dragProps.style,
                }}
              >
                Box
              </p>
            );
          }}
        </ReactDrag>
      </div>
      <p>77</p>
      <p>88</p>
      <p>99</p>
      <p>00</p>
      <p>11</p>
      <p>22</p>
      <p>33</p>
      <p>44</p>
      <p>55</p>
      <p>66</p>
      <p>77</p>
      <p>88</p>
      <p>99</p>
      <p>00</p>
      <p>11</p>
      <p>22</p>
      <p>33</p>
      <p>44</p>
      <p>55</p>
      <p>66</p>
      <p>77</p>
      <p>88</p>
      <p>99</p>
      <p>00</p>
    </div>
  );
}

export default Page;
